<template>
  <div>
    <div>
      <div class="title">
        <h1>{{ callName }}的食谱</h1>
        <el-button size="mini" v-if="shipuList.length > shipuLimit"
          >更多>></el-button
        >
      </div>

      <div class="empty-status-box" v-if="shipuList.length == 0">
        <span v-if="isMe">
          你还没有任何食谱哦~，快去<span class="link-btn" @click="$router.push('/publish')">发布</span>一篇吧！
        </span>
        <span v-else> 该用户没有任何公开的食谱，快去别处看看吧~ </span>
      </div>
    </div>

    <div>
      <div class="title">
        <h1>{{ callName }}的菜单</h1>
        <el-button size="mini" v-if="caidanList.length > caidanLimit"
          >更多>></el-button
        >
      </div>

      <div class="empty-status-box" v-if="caidanList.length == 0">
        <span v-if="isMe">
          你还没有任何菜单哦~，快去<span class="link-btn" @click="$router.push('/user/1/caidan')">创建</span>一个吧！
        </span>
        <span v-else> 该用户没有任何公开的菜单，快去别处看看吧~ </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    isMe:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      // isMe: true,
      caidanList: [],
      caidanLimit: 3,
      // caidanList: [1, 2, 3, 4, 5, 6],
      shipuList: [],
      shipuLimit: 4,
    };
  },
  computed: {
    callName() {
      if (this.isMe) return "我";
      return "TA";
    },
  },
};
</script>

<style lang="less" scoped>
.empty-status-box {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

